<template>
    <div class="detailtop" :style="bgimg">
        <div class="texttop" style="p">
            <p class="detailtital">{{ detailObj.title }}</p>
            <i class="fa fa-fw fa-user"></i>发表于 <span>{{ detailObj.createTime }}</span> •
            <i class="fa fa-fw fa-eye"></i>{{ detailObj.viewCount }} 次围观 •
        </div>

    </div>
</template>
<script>
import { getArticle } from '../api/article'
export default {
    data() {
        return {
            aid: '',
            detailObj: {},
        }
    },
    computed: {
        bgimg() {
            return {
                background: `url(${this.detailObj.thumbnail}) no-repeat center center`,
                backgroundSize: 'cover'
            }
        }
    },
    methods: {
        getArticleimg() {
            this.aid = this.$route.query.aid
            getArticle(this.aid).then(res => {
                this.detailObj = res
            })
        }
    },
    created() {
        this.getArticleimg()
    }
}

</script>
<style scoped>
.detailtop {
    widows: 100%;
    height: 20rem;
    margin-bottom: -4rem;
}
.texttop{
    position: relative;
    top: 11rem;
    left: 10rem;
    color: white;
    font-size: 1rem;
}
.detailtital{
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
</style>